<template>
  <div>
    <div class="ctn" @click="active">{{value}}</div>
    <transition name="fade">
      <div class="option" v-show="isShow">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
/*
 */
import emitter from './../el-form/form-bus.js'
import popper from 'popper.js'
export default {
  componentName: 'elSelect',
  name: 'elSelect',
  mixins: [emitter],
  data () {
    return {
      isShow: false,
      popper: null
    }
  },
  created () {
    this.$on('select', (value) => {
      this.select(value)
    })
  },
  provide () {
    return {
      elSelect: this
    }
  },
  props: {
    value: String
  },
  mounted () {
  },
  methods: {
    active () {
      this.isShow = !this.isShow
      this.createPopper()
    },
    createPopper () {
      if (!this.popper) {
        this.$nextTick(function () {
          this.popper = new popper(document.querySelector('.ctn'), document.querySelector('.option'), {
            placement: 'bottom',
            modifiers: {
              computeStyle: {
                gpuAcceleration: false // 去掉动画
              }
            }
          })
        })
      }
    },
    select (value) {
      this.isShow = false
      this.$emit('input', value)
    }
  }
}
</script>

<style lang="scss">
.ctn {
  width: 100px;
  height: 30px;
  border: 1px solid gray;
}
.option {
  width: 100px;
  border: 1px solid gray;
  background: #fff;
  transform-origin: top;
}
.fade-enter {
  transform: scaleY(0);
}
.fade-enter-active {
  transition: all 0.3s ease;
}
.fade-enter-to {
  transform: scaleY(1);
}
.fade-leave {
  transform: scaleY(1);
}
.fade-leave-active {
  transition: all 1s ease;
}
.fade-leave-to {
  transform: scaleY(0);
}
</style>
